<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import { Title } from '~/components/Title/index';
import LayoutCol from '~/components/MainLayout/layoutCol.vue';
import Imgs from '~/components/swiper/imgs.vue';
import { LeftMenu } from '~/components/leftMenu';

// 菜单数据
const menuItems = [
    {
        id: '1',
        title: '基本信息',
        icon: 'i-ep-info-filled',
        children: [
            { id: '1-1', title: '项目名称' },
            { id: '1-2', title: '联系人信息' },
            { id: '1-3', title: '项目要求' }
        ]
    },
    {
        id: '2',
        title: '产品规格',
        icon: 'i-ep-setting',
        // children: [
        //   { id: '2-1', title: '尺寸选择' },
        //   { id: '2-2', title: '材质选择' },
        //   { id: '2-3', title: '颜色选择' }
        // ]
    },
    {
        id: '3',
        title: '设计选项',
        icon: 'i-ep-picture-filled',
        children: [
            { id: '3-1', title: '上传设计稿' },
            { id: '3-2', title: '设计风格' },
            { id: '3-3', title: '排版要求' }
        ]
    },
    {
        id: '4',
        title: '数量与交付',
        icon: 'i-ep-finished',
        children: [
            { id: '4-1', title: '订购数量' },
            { id: '4-2', title: '交付时间' },
            { id: '4-3', title: '物流方式' }
        ]
    },
    {
        id: '5',
        title: '价格与支付',
        icon: 'i-ep-finance',
        children: [
            { id: '5-1', title: '报价详情' },
            { id: '5-2', title: '支付方式' },
            { id: '5-3', title: '发票信息' }
        ]
    }
];

// // 状态管理
// const openSubMenu = ref('1'); // 默认展开第一个菜单项
// const activeItem = ref('1');
// const activeChild = ref('1-1');
// // 转换为产品列表数据
// const swiperList = [
//     '/testImgs/1.webp',
//     '/testImgs/2.webp',
//     '/testImgs/3.webp',
//     '/testImgs/5.webp',
//     '/testImgs/6.webp',
//     '/testImgs/8.webp',
// ]
// const productList = swiperList.map((img, index) => ({
//     id: index + 1,
//     name: 'Chenille Patches',
//     price: '$12.99',
//     imageUrl: img,
//     discount: index % 2 === 0, // 每隔一个产品显示折扣标签
// }))



</script>

<template>
    <MainLayout :maxwidth="false" startColor="2">
        <div class="bg-[#000] px-12px" v-if="false">
            <div class="max-w-[1200px] mx-auto py-12px! flex text-[#fff] items-center justify-between">
                THE/STUDIO
                <div class="flex justify-center ml-12px w-50">
                    <div v-for="value in 5" class="flex-1 w-0 relative flex">
                        <!-- after:content-['*'] after:text-red-500 after:ml-1 -->
                        <span class="inline-block w-[20px] h-[20px] rounded-full bg-[#fff]"></span>
                        <div class="w-[98%] h-[1px] bg-[#fff] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
                            v-if="value < 5"></div>
                    </div>
                </div>
                <div>
                    购物车
                </div>
            </div>
        </div>
        <!-- <div class="flex flex-wrap justify-center text-center w-full">
            <span v-for="item in 8" :key="item"
                class="whitespace-nowrap text-sm bg-gray-200! px-4 py-2 mx-2 my-2 rounded-lg! ">
                Manufacturing
            </span>
        </div> -->
        <LayoutCol>
            <v-row no-gutters>
                <v-col cols="12" sm="3">
                    <div class="sticky top-2 z-10">
                        <LeftMenu :menuItems="menuItems" />
                    </div>
                </v-col>
                <v-col cols="12" sm="9">
                    <div class="sm:ml-6">
                        <Title title="Custom Embroidered Patches"
                            content="Custom Military Patches MakerCustom Military Patches MakerCustom Military Patches MakerCustom Military Patches MakerCustom Military Patches MakerCustom Military Patches Maker"
                            class="mb-4" />
                        <div v-for="value in 3" class="mb-4">
                            <h3 class="text-left">Custom Patches</h3>
                            <Imgs :num="4"
                                :list="['/show1/71.webp', '/show1/70.webp', '/show1/73.webp', '/show1/75.webp']"
                                :imgAuto="true" :showTitle="false" />
                        </div>
                    </div>
                </v-col>
            </v-row>
        </LayoutCol>
        <LayoutCol>
            表单组件
        </LayoutCol>
    </MainLayout>
</template>

<style scoped lang="scss">
:deep(.v-stepper-item) {
    padding-top: 0px !important;
    padding-bottom: 10px !important;

    .v-stepper-item__content {
        display: none !important;
    }

    .v-stepper-item__avatar {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
</style>
